window.onload = function () {
  init();
}

function init() {
  initCourseList();
}

var initCourseList = (function () {
  // 获取分页按钮盒子
  var oBtnGroup = document.getElementsByClassName('btn-group')[0],
    //获取所有的按钮
    oBtnItems = document.getElementsByClassName('btn-item'),
    //获取ul
    oList = document.getElementsByClassName('js-list')[0],
    // 获取字符串模板
    oTpl = document.getElementById('J_itemTpl').innerHTML,
    // 获取loading盒子
    loading = document.getElementsByClassName('loading')[0],
    // 初始化页码
    page = 0,
    // 初始化计时器
    t = null,
    // 初始化缓存池
    cache = {};

  function init() {
    // 首次加载数据
    getAjaxCourses(page);
    bindEvent();
  }

  function bindEvent() {
    addEvent(oBtnGroup, 'click', btnClick);
  }

  //事件处理函数：点击分页按钮
  function btnClick(e) {
    var e = e || window.event,
      tar = e.target || e.srcElement,
      oParent = tar.parentNode,
      className = oParent.className,
      //初始化下标为负值时程序无法往下执行
      //等检测到符合条件时再重新赋值
      thisIdx = -1;

    //如果a的父级节点的类名是btn-item
    if (className === 'btn-item') {
      var len = oBtnItems.length,
        item;
      //获取被点击的下标
      thisIdx = Array.prototype.indexOf.call(oBtnItems, oParent);
      //下标赋值给页码
      page = thisIdx;

      //请求数据前先查看有没有缓存数据
      //如有缓存数据不再请求数据
      if (cache[page]) {
        // 渲染时读取缓存后的数据函数
        getCacheCourses();
      } else {
        // 当页码被改变时执行后台数据请求
        getAjaxCourses();
      }

      //循环修改类名
      for (var i = 0; i < len; i++) {
        item = oBtnItems[i];
        //还原类名
        item.className = 'btn-item';
      }
      // 点击哪一项哪一项添加类名
      // oBtnItems[page].className += ' cur';
      oParent.className += ' cur';
    }
  }

  //请求后台数据
  function getAjaxCourses() {
    // 调用ajax
    ajaxReturn({
      url: APIs.getCourses,
      data: {
        //直接拿到被点击赋值的那个页码做为数据请求
        page: page
      },
      success: function (data) {
        //每次请求完毕把data存储到存储池
        //恰好page也是被点击的页码
        //恰好把请求的当页数据存给存储池的当页项
        //cache[0] = data;
        //cache[1] = data;
        //cache[2] = data;
        //...
        cache[page] = data;

        /**
         * 赋值后cache数据结构为:
         * {
         *   0: [{},{},{},{},{},{},{},{},{},{}],
         *   1: [{},{},{},{},{},{},{},{},{},{}],
         *   2: [{},{},{},{},{},{},{},{},{},{}],
         *   3: [{},{},{},{},{},{},{},{},{},{}],
         *   4: [{},{},{},{},{},{},{},{},{},{}]
         * }
         */

        // 显示loading盒子
        loading.style.display = 'block';
        //交互功能：并让loading盒子显示一小段时间
        t = setTimeout(function () {
          //执行渲染函数
          render(data);
          //loading盒子消失
          loading.style.display = 'none';
        }, 1000);
      },
      error: function () {
        alert('获取数据失败')
      }
    })
  }

  // 渲染时读取缓存后的数据函数
  function getCacheCourses() {
    // 渲染时传入缓存池的当页数据
    render(cache[page]);
  }

  //渲染页面
  function render(data) {
    // 初始化模板字符串
    var list = '',
      len = data.length,
      item;

    //记住：需要循环才能逐个添加字符到list
    for (var i = 0; i < len; i++) {
      item = data[i];
      list += setTplToHTML(oTpl, regTpl, {
        folder: item.folder,
        classname: item.classname,
        name: item.name,
        watched: item.watched
      })
    }
    oList.innerHTML = list;
  }

  return function () {
    init();
  }
})();

// API接口地址
var APIs = {
  getCourses: 'http://study.jsplusplus.com/Lfcourses/getCourses'
}

/**
 * 封装简易ajax
 */

function ajaxReturn(opt) {
  $.ajax({
    url: opt.url,
    type: 'POST',
    dataType: 'JSON',
    data: opt.data,
    timeout: 100000,
    success: opt.success,
    error: opt.error
  })
}